const path = require('path')
// 启用热更新的第二步
const webpack = require('webpack')
// 导入在内存中生成 HTML 页面的插件
// 只要是插件，都要放到 plugins 节点里头
// 这个插件的两个作用：
// 1.自动在内存中根据指定页面生成一个内存的页面
// 2.自动把打包好的 bundle.js 追加到页面中去
const htmlWebpackPlugin = require('html-webpack-plugin')
// 这个配置文件是一个js文件，通过 Node 中的模块操作，向外暴露了一个配置对象

const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
    entry: path.join(__dirname, './src/main.js'), //入口，表示要使用webpack打包哪个文件
    output: { //输出相关的配置
        path: path.join(__dirname, './dist'),
        filename: 'bundle.js' // 指定输出的文件的名称
    },
    mode: 'production', // 打包的模式
    // devServer: { // 这是配置 dev-server 命令参数的第二种形式，相对来说这种方式麻烦一些
    //     //  --open --port 3000 --contentBase src --hot
    //     open: true, // 自动打开浏览器
    //     port: 3000, // 设置启动时候的端口
    //     contentBase: 'src', // 制定托管的根目录
    //     hot: true // 启用热更新的第一步
    // },
    plugins: [ // 配置插件的节点
        new webpack.HotModuleReplacementPlugin(), // new 一个热更新的模块对象，这是启用热更新的第三步
        new htmlWebpackPlugin({ // 创建一个在内存中生成HTML页面的插件
            template: path.join(__dirname, './src/index.html'), // 指定模板页面，将来会根据指定的页面生成内存中的HTML页面
            filename: 'index.html' // 指定生成页面的名称
        }),
        new VueLoaderPlugin()
    ],
    module: { // 这个节点用于配置所有第三方模块加载器
        rules: [ // 所有第三方模块的匹配规则，loader传参：直接在loader名称后面加?
            { test: /\.css$/, use: ['style-loader', 'css-loader'] }, // 配置处理.css文件的第三方loader,正则表达式，表明以.css结尾的文件,loader调用顺序为从右到左
            { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }, //配置处理 .less 文件的第三方 loader 规则
            { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }, //配置处理 .scss 文件的第三方 loader 规则
            { test: /\.(jpg|png|gif|bmp|jpeg)$/, use: ['url-loader?limit=483877&name=[hash:8]-[name].[ext]'] }, //配置处理css中url的第三方 loader 规则
            //limit参数可以限定图片大小（单位为字节）,如果引用的图片大于或等于给定的值，则不会被转换为Base64格式的字符串，如果图片小于给定的值，则会被转换为Base64格式的字符串
            //name参数可以指定图片名称[name]表示取原本文件的名称[ext]则是取原文件的后缀名,[hash:8]表示取一个8位的hash值，可防止图片名称重复
            { test: /\.(ttf|woff|woff2|eot|svg)$/, use: ['url-loader'] }, // 处理字体文件的 loader
            { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }, // 处理高级JS语法的 Babel 的 loader
            { test: /\.vue$/, use: 'vue-loader' } //处理 Vue 文件的 loader
        ]
    },
    resolve: {
        alias: { // 修改 Vue 被导入时候的路径
            // 'vue$': 'vue/dist/vue.js'
        }
    }
}